<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <title>BoxPlot</title>
    <link rel="stylesheet" href="style.css" />
<body>
<script src="d3.v3.min.js"></script>
<script src="Data.js"></script>
<script src="GeoLib2.js"></script>
<script src="InteractionLib.js"></script>
<script>
    d3.csv("boxplot.csv", function (csv) {
        var traits1 = keys_of_objects(csv);

        var boxplot=Main_Bound_region;
        boxplot.svg_width=900;
        boxplot.svg_height=400;
        boxplot.g_height=350;
        boxplot.g_width=800;
        boxplot.SVG("body").call(Interaction.Zoom(1,8,'g1'));
        boxplot.G("svg");
        boxplot.G("g0").attr("transform", "translate(50,10)");


        var temp =0,temp_data=[],tmax,tmin=traits1[2];
        for(var i=0;i<traits1.length;i++)
        {
            values_of_key_int(csv,traits1[i],temp_data);
            if(temp<max_of_array(temp_data)) {
                temp = max_of_array(temp_data);
                tmax=traits1[i];
            }


        }
      //  Geo_Primitives.Draw_Axis(csv,t,0,0,'v',20,'g1').attr("class","y axis");
        var width=d3.select("#g1").attr("width");
        var height=d3.select("#g1").attr("height");
        var scalex=Geo_Primitives.Scale(csv,tmax,tmax,0,0,width,0,'x');
        var scaley=Geo_Primitives.Scale(csv,tmax,tmax,0,0,height,0,'y');

        var median=[], fq=[], sq=[], min=[], max=[];
        for(var i=0;i<traits1.length;i++) {
            var boxplot_data = [], max_array = [], min_array = [];
            values_of_key_int(csv, traits1[i], boxplot_data);
            sort_array_ACE(boxplot_data);
            max[i] = max_of_array(boxplot_data);
            min[i] = min_of_array(boxplot_data);
            median[i] = median_of_array(boxplot_data);
            divide_array(boxplot_data, min_array, max_array);
            fq[i] = median_of_array(min_array);
            sq[i] = median_of_array(max_array);

        }
        console.log(max);
        var mydata2=[],x_pad=0;
        for(var i=0;i<max.length;i++) {
            Generate_DataObject_line(mydata2, 20+x_pad,scaley(max[i]),50+x_pad,scaley(max[i]),"black", 4);

            Generate_DataObject_line(mydata2, 20+x_pad,scaley(min[i]),50+x_pad,scaley(min[i]),"black", 4);

            Generate_DataObject_line(mydata2, 20+x_pad,scaley(median[i]),50+x_pad,scaley(median[i]),"black", 2);

            Generate_DataObject_line(mydata2, 20+x_pad,scaley(fq[i]),50+x_pad,scaley(fq[i]),"black", 2);

            Generate_DataObject_line(mydata2, 20+x_pad,scaley(sq[i]),50+x_pad,scaley(sq[i]),"black", 2);

            Generate_DataObject_line(mydata2, 20+x_pad,scaley(fq[i]),20+x_pad,scaley(sq[i]),"black", 2);

            Generate_DataObject_line(mydata2, 50+x_pad,scaley(fq[i]),50+x_pad,scaley(sq[i]),"black", 2);

            Generate_DataObject_line(mydata2, (20+x_pad+50+x_pad)/2,scaley(max[i]),(20+x_pad+50+x_pad)/2,scaley(sq[i]),"black", 2);

            Generate_DataObject_line(mydata2, (20+x_pad+50+x_pad)/2,scaley(min[i]),(20+x_pad+50+x_pad)/2,scaley(fq[i]),"black", 2);

            x_pad+=70;
        }
        Geo_Primitives.DrawLine(mydata2,"g1");


        Geo_Primitives.Draw_Axis(csv,tmax,tmin,0,0,"v",20,"g1").attr("class","y axis");



    });
 </script>